<template>
  <monthly-cost
    ref="monitor"
    type="energyMonitor"
    :queryFormItem="collapseFormItem"
    :collapseFormItem="collapseFormItem"
    @handleSearch="handleSearch"
    :sourceData="sourceData"
    @slefChange="change"
    :classification="classification"
  />
</template>

<script>
import monthlyCost from "../components/monthlyCost.vue";
import { typeClassName } from "@/pages/config/classNameMap";
import mixin from "@/pages/components/mixins/mixin";
import { myRequest } from "public/service/api/myRequest";
export default {
  components: { monthlyCost },
  mixins: [mixin],

  computed: {
    collapseFormItem() {
      return [
        {
          key: "yearMonth",
          title: {
            "zh-CN": "选择年月",
            "en-US": "yearMonth",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "month" },
        },
        {
          key: "batchNo",
          title: {
            "zh-CN": "批次",
            "en-US": "batchNo",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: {
            type: "select",
            options: this.specOptions,
            filterable: true,
          },
        },
      ];
    },
  },
  watch: {
    typeName: {
      handler(val) {
        this.getSpecOptions();
      },
    },
  },
  data() {
    return {
      classification: "3",
      queryFormItems: [],
      collapseFormItems: [],

      specOptions: [],
      typeClassObject: null, // 能源类型实例
      sourceData: {
        yearMonth: "2023-07",
        batchNo: "",
        type: "energy",
        groupKey: "typeName",
        sumKey: "actualCost",
      },
    };
  },
  created() {
    // this.getSpecOptions();
  },
  methods: {
    getSpecOptions(val) {
      myRequest({
        url: "/star4.0/quantityStatistics/queryBatchNoOptionsByYearMonth",
        method: "post",
        data: {
          yearMonth: val,
        },
      }).then((res) => {
        let data = JSON.parse(JSON.stringify(res));
        data.forEach((item) => {
          item.value = String(item.value);
        });
        this.$set(this, "specOptions", data);
      });
    },
    change(val) {
      console.log(val);
      if (val.yearMonth != "" && val.yearMonth != null) {
        this.getSpecOptions(val.yearMonth);
      } else {
        this.specOptions = [];
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>
